<template>
  <div>
    <!--    <el-dialog title="评论" :visible.sync="obj.dialogVisible" custom-class="commentClass">-->
    <div class="commentDox" v-if="obj.dialogVisible">

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="点赞列表" name="dz">
          <div class="dzList">
            <div class="item" v-for="item in dzList">
              <div class="left">
                <el-avatar size="large" :src="item.sysUser.avatar"></el-avatar>
              </div>
              <div class="right">
                <div class="name">{{ item.sysUser.nickName }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论" name="pl">
          <!-- 发表评论 -->

          <div class="commentBtnBox">
            <el-input type="textarea" placeholder="请输入内容" v-model="form.textComment" class="inpoutTextarea"
                      :autosize="{ minRows: 2 }"></el-input>
            <div class="btn">
              <div class="btnLeft">
                <!-- 表情 -->
                <el-popover placement="bottom" width="300" trigger="click">
                  <div class="emijs out11"></div>

                  <div slot="reference" class="btnItem">
                    <img src="@/assets/images/表情.png" alt=""/>
                    <div>表情</div>
                  </div>
                </el-popover>
                <!-- 表情 -->
              </div>
              <div class="btnRight">
                <el-button type="primary" round @click="submit">提交</el-button>
              </div>
            </div>
          </div>

          <!-- 发表评论 -->
          <div class="commentList" v-for="itemMessage in messageList">
            <div class="left">
              <el-avatar size="large" :src="item.sysUser.avatar"></el-avatar>
            </div>
            <div class="right">
              <!-- 评论内容 -->
              <div>
                <div v-html="setMessage(
                    itemMessage.textComment,
                    itemMessage.sysUser && itemMessage.sysUser.nickName
                  )
                    "></div>
              </div>
              <div class="btnComment">
                <div>
                  {{ itemMessage.createTime }}&nbsp;&nbsp;来自：{{
                    itemMessage.reserve4 ? itemMessage.reserve4 : "未知"
                  }}
                </div>
                <!-- 一级控件 -->
                <div class="btnOne">
                  <img src="@/assets/images/评论.png" alt="" @click="oneComment(itemMessage, 2)"/><span> 评论</span>
                </div>
                <!-- 一级控件 -->
              </div>
              <div class="two">
                <!-- 二级评论 -->
                <div class="twoComment" v-for="itemChildren in itemMessage.children">
                  <div class="left">
                    <el-avatar size="large" :src="itemChildren.sysUser.avatar"></el-avatar>
                  </div>
                  <div class="right">
                    <!-- 评论内容 -->
                    <div>
                      <div v-html="setMessage(
                          itemChildren.textComment,
                          itemChildren.sysUser &&
                          itemChildren.sysUser.nickName
                        )
                          "></div>
                    </div>
                    <div class="btnComment">
                      <div>
                        {{ itemChildren.createTime }}&nbsp;&nbsp;来自：{{
                          itemChildren.reserve4
                            ? itemChildren.reserve4
                            : "未知"
                        }}
                      </div>
                      <!-- 二级级控件 -->
                      <div class="btnOne">
                        <img src="@/assets/images/评论.png" alt="" @click="oneComment(itemChildren, 3)"/><span>
                            评论</span>
                      </div>
                      <!-- 一级控件 -->
                    </div>

                    <!-- 三级评论 -->
                    <div class="twoComment" v-for="threChildren in itemChildren.children">
                      <div class="left">
                        <el-avatar size="large" :src="threChildren.sysUser.avatar"></el-avatar>
                      </div>
                      <div class="right">
                        <!-- 评论内容 -->
                        <div>
                          <div v-html="setMessage(
                              threChildren.textComment,
                              threChildren.sysUser &&
                              threChildren.sysUser.nickName
                            )
                              "></div>
                        </div>
                        <div class="btnComment">
                          <div>
                            {{
                              threChildren.createTime
                            }}来自：{{ threChildren.reserve4 ? threChildren.reserve4 : "未知" }}
                          </div>
                          <!-- 三级级控件 -->
                          <!-- <div class="btnOne">
                            <img
                              src="@/assets/images/评论.png"
                              alt=""
                              @click="oneComment(threChildren)"
                            /><span> 评论</span>
                          </div> -->
                          <!-- 三级控件 -->
                        </div>
                      </div>
                    </div>
                    <!-- 三级评论 -->

                    <div class="more" style="margin-left: 0px" @click="getmoreThree(itemChildren)" v-if="
                        itemChildren.hasChild &&
                        itemChildren.children.length < itemChildren.childCount
                      ">
                      查看更多
                    </div>
                  </div>
                </div>
                <!-- 二级评论 -->

                <div class="more" style="margin-left: 0px" v-if="
                    itemMessage.hasChild &&
                    itemMessage.children.length < itemMessage.childCount
                  " @click="getmoreTwo(itemMessage)">
                  查看更多
                </div>
              </div>
              <!-- 评论内容 -->
            </div>
          </div>
          <div class="more" style="margin: 0 auto; width: 60px" @click="getmoreOne"
               v-if="(messageList.length > dingTotal) && messageList.length >= 10">
            查看更多
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    </el-dialog>-->
    <!-- 弹出框填写评论 -->
    <van-dialog v-model:show="setComment" title="标题" show-cancel-button @confirm="addcommentBtn"
                @cancel="setComment = false">
      <div slot="title" style="font-size: 20px; font-weight: bold">
        回复{{ oldComment.sysUser && oldComment.sysUser.nickName }}
      </div>
      <div>
        <!--        <el-input type="textarea" placeholder="请输入内容" v-model="addcommentForm.textComment" class="inpoutTextarea"-->
        <!--                  :autosize="{ minRows: 2 }"></el-input>-->
        <van-field
          v-model="addcommentForm.textComment"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入内容"
        />
      </div>

    </van-dialog>

    <!-- 弹出框填写评论 -->
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {
  getForumsDetail,
  addLike,
  deletaLike,
  getLikeList,
  addComment,
  getCommentList,
  getCommentTwo,
  getCommentThree,
} from "@/api/forum";

export default {
  props: {
    obj: {
      type: Object,
      default: function () {
       return  {
          dialogVisible: false,
        }
      },
      required:false
    },
  },
  watch: {
    "obj.dialogVisible": function (n, o) {
      console.log(n);

      //论坛详情
      this.getLunDetail();
      //点赞列表
      let obj = {
        forumId: this.obj.ids,
      };
      getLikeList(obj).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.dzList = res.rows;
        }
      });
      //   获取表情包
      if (this.isEmij) {
        setTimeout(() => {
          this.getEmig();
        }, 300);
      }
    },
  },

  data() {
    return {
      item: {},
      activeName: "pl",
      dzList: [],
      form: {textComment: ""},
      isEmij: true,
      queryForm: {
        pageSize: 10,
        pageNum: 1,

      },
      messageList: [],
      dingTotal: 0,
      setComment: false,
      oldComment: {},
      addcommentForm: {},
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    //获取论坛详情
    getLunDetail() {
      getForumsDetail(this.obj.ids).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.item = res.data;
          let arr = [];
          if (this.item.fileAddress1) {
            arr.push(this.item.fileAddress1);
          }
          if (this.item.fileAddress2) {
            arr.push(this.item.fileAddress2);
          }
          if (this.item.fileAddress3) {
            arr.push(this.item.fileAddress3);
          }
          if (this.item.fileAddress4) {
            arr.push(this.item.fileAddress4);
          }
          if (this.item.fileAddress5) {
            arr.push(this.item.fileAddress5);
          }
          if (this.item.fileAddress6) {
            arr.push(this.item.fileAddress6);
          }
          if (this.item.fileAddress7) {
            arr.push(this.item.fileAddress7);
          }
          if (this.item.fileAddress8) {
            arr.push(this.item.fileAddress8);
          }
          if (this.item.fileAddress9) {
            arr.push(this.item.fileAddress9);
          }
          this.item["fileList"] = arr;
          this.messageList = this.item.commentList;
          this.messageList.map((ele) => {
            this.$set(ele, "children", []);
          });
        }
      });
    },

    //切换tab
    handleClick(val) {
      //   console.log(this.activeName);
    },
    //获取表情包
    getEmig() {
      const doms = document.querySelector(".out11");
      for (var a = 128512; a <= 128580; a++) {
        let that = this;
        const emojis = "&#" + a;
        const pTags = document.createElement("p");
        pTags.innerHTML = emojis;
        pTags.className = "emojiHover";
        pTags.addEventListener("click", function () {
          that.form.textComment += `[${emojis}]`;
        });
        doms.appendChild(pTags);
      }
      for (var b = 129296; b <= 129488; b++) {
        let that = this;
        const emojis = "&#" + b;
        const pTags = document.createElement("p");
        pTags.innerHTML = emojis;
        pTags.className = "emojiHover";
        pTags.addEventListener("click", function () {
          that.form.textComment += `[${emojis}]`;
        });
        doms.appendChild(pTags);
      }
      this.isEmij = false;
    },
    //新增顶级评论
    submit() {
      let obj = {
        forumId: this.obj.ids,
        userId: this.userId,
        textComment: this.form.textComment,
        hierarchy: 1,
        parentId: 0,
        reserve1: 0,
      };
      console.log(obj);
      addComment(obj).then((res) => {
        if (res.code == 200) {
          this.form.textComment = "";
          this.$message({
            message: "评论成功",
            type: "success",
          });
          this.getLunDetail();
        }
      });
    },
    //获取顶级评论
    getmoreOne(type=2) {
      if(type==1){
        this.queryForm.pageSize=10
        this.queryForm.pageNum=1
        this.queryForm['forumId'] = this.obj.ids
        getCommentList(this.queryForm).then((res) => {
          if (res.code == 200) {
            res.rows.map((ele) => {
              ele["children"] = [];
            });
            this.messageList=res.rows;
            this.dingTotal = res.total;

            console.log(this.messageList, "55656");
          }
        });

      }else{
        this.queryForm.pageNum++;

        this.queryForm['forumId'] = this.obj.ids
        getCommentList(this.queryForm).then((res) => {
          if (res.code == 200) {
            res.rows.map((ele) => {
              ele["children"] = [];
            });
            this.messageList.push(...res.rows);
            this.dingTotal = res.total;

            console.log(this.messageList, "55656");
          }
        });
      }



    },
    //换行
    setBr(val) {
      return val.split("\n").join("<br/>");
    },
    //评论内容添加用户名
    setMessage(msg, name) {

      let message = this.setArray(msg)


      return `<span class='userNameSpan'>${name}：</span>` + message;
    },
    //发送一级评论
    oneComment(item, type) {
      this.setComment = true;
      this.oldComment = item;
      this.oldComment["type"] = type;
    },
    //添加评论
    addcommentBtn() {


      console.log(this.addcommentForm)
      if (!this.addcommentForm.textComment) {
        this.$message({
          message: "评论内容不能为空",
          type: "warning",
        });
        return;
      }
      let obj;
      if (this.oldComment.type == 2) {
        obj = {
          forumId: this.obj.ids,
          userId: this.userId,
          textComment: this.addcommentForm.textComment,
          hierarchy: this.oldComment.type,
          parentId: this.oldComment.commentId,
          reserve1: 0,
          reserve2: this.oldComment.sysUser.userId,
          reserve3: this.oldComment.sysUser.nickName,
        };
      } else {
        obj = {
          forumId: this.obj.ids,
          userId: this.userId,
          textComment: this.addcommentForm.textComment,
          hierarchy: this.oldComment.type,
          parentId: this.oldComment.parentId,
          reserve1: this.oldComment.commentId,
          reserve2: this.oldComment.sysUser.userId,
          reserve3: this.oldComment.sysUser.nickName,
        };
      }


      console.log(obj, this.oldComment);
      addComment(obj).then((res) => {
        if (res.code == 200) {
          this.form.textComment = "";
          this.$message({
            message: "评论成功",
            type: "success",
          });
          this.setComment = false;
          this.oldComment = {};
        }
      });

      this.getmoreOne(1)


    },
    //获取二级
    getmoreTwo(item) {
      getCommentTwo(item.commentId).then((res) => {
        if (res.code == 200) {
          let count = item.childCount;
          console.log(item, res);
          res.rows.map((ele) => {
            if (ele.childCount) {
              count = count - ele.childCount;
            }
            this.$set(ele, "children", []);
          });
          item.childCount = count;
          item.children.push(...res.rows);
        }
      });
    },
    //获取三级评论
    getmoreThree(item) {
      getCommentThree(item.commentId).then((res) => {
        if (res.code == 200) {
          let count = item.childCount;
          console.log(item, res);
          res.rows.map((ele) => {
            if (ele.childCount) {
              count = count - ele.childCount;
            }
            this.$set(ele, "children", []);
          });
          item.childCount = count;
          item.children.push(...res.rows);
        }
      });
    },

    //去除中括号
    setArray(item) {
      return item.replace(/\[|\]/g, '');
    }
  },
};
</script>
<style lang="scss" scoped>
.commentDox {
  //height: 690px;
  width: 100%;
  min-height: fit-content;
  overflow: auto;
}

.commentDetail {
  /* min-height: 300px; */
  min-height: min-content;
  background-color: white;
  margin-bottom: 15px;
  //min-width: 600px;
  padding: 15px;

  > .top {
    height: 80px;
    /* background-color: red; */
    display: flex;

    > .left {
      display: flex;

      > div:nth-of-type(1) {
        width: 60px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        > span {
          width: 3.25rem;
          height: 3.25rem;
        }
      }

      > div:nth-of-type(2) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 15px 0;

        > div:nth-of-type(1) {
          font-size: 18px;
          font-weight: bold;
        }

        > div:nth-of-type(2) {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .centent {
    display: flex;

    > .innerCentent {
      margin-left: 60px;
      /* background-color: red; */
      flex: 1;

      .cententImg {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 10px;

        > .el-image {
          margin-bottom: 10px;
          width: 133px;
          height: 133px;
          margin-left: 8px;
        }
      }

      > .btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        margin-top: 10px;

        > div {
          display: flex;
          align-items: center;
        }

        img {
          height: 20px;
          width: 20px;
          cursor: pointer;
        }
      }
    }
  }
}

.dzList {
  .item {
    display: flex;
    align-items: center;
    font-size: 20px;
    height: 50px;
    line-height: 50px;

    > .left {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > .right {
      margin-left: 8px;
    }
  }
}

.btn {
  display: flex;
  align-items: center;
  /* height: 100px; */
  justify-content: space-between;

  .btnLeft {
    display: flex;

    > span {
      height: 100%;
    }
  }

  .btnItem {
    height: 100%;
    text-align: center;
    padding-top: 15px;
    cursor: pointer;
    margin-right: 20px;

    > img {
      height: 40px;
    }

    > div {
      font-size: 16px;
    }
  }
}

.out11 {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  overflow: auto;
  padding: 10px;
  padding-left: 0px;
}

.commentList {
  display: flex;
  margin-top: 20px;

  > .right {
    margin-left: 8px;
    flex: 1;

    > div:nth-of-type(1) {
      display: flex;
      //line-height: 22px;
      font-size: 13px;
    }
  }

  .btnComment {
    display: flex;
    justify-content: space-between;
    width: 100%;

    > div:nth-of-type(1) {
      font-size: 11px;
      margin-top: 15px;
      color: #939393;
    }
  }
}

.twoComment {
  display: flex;
  margin-top: 20px;

  > .right {
    margin-left: 8px;
    flex: 1;

    > div:nth-of-type(1) {
      display: flex;
      //line-height: 22px;
      font-size: 13px;
    }
  }

  .btnComment {
    display: flex;
    justify-content: space-between;

    > div:nth-of-type(1) {
      font-size: 11px;
      margin-top: 10px;
      color: #939393;
    }

    .btnOne {
      opacity: 0;
    }
  }
}

.twoComment:hover {
  .btnOne {
    opacity: 1;
  }
}

.more {
  color: blue;
  font-size: 14px;
  margin-left: 40px;
  margin-top: 15px;
}

.btnOne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-top: 10px;

  > div {
    display: flex;
    align-items: center;
  }

  img {
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
}
</style>
<style>
.commentClass {
  height: 800px;
  width: 1000px;
}

.userNameSpan {
  color: #eb7350;
  padding-right: 8px;
}

.setCommentClass {
  width: 900px;
  border-radius: 30px;
  height: 250px;
}
</style>
